<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
    <div class="map">
      <el-form-item label="商家地址" prop="merchantAddress">
      <el-input v-model="dataForm.merchantAddress" placeholder="请输入地址来直接查找相关位置" v-on:input="getLocationPoint"></el-input>
      </el-form-item>
      <el-form-item>
      <baidu-map class="bmView" :scroll-wheel-zoom="true" :center="location" :zoom="zoom" @click="getLocationPointClick" ak="9iKr8UvLdpPBIBj07Av6QkbwOVZqjvAu">
        <bm-view style="width: 100%; height:200px; flex: 1"></bm-view>
        <bm-local-search :keyword="dataForm.merchantAddress" :auto-viewport="true" style="display: none"></bm-local-search>
      </baidu-map>
      </el-form-item>
    </div>
    <el-form-item label="商家名称" prop="merchantName">
      <el-input v-model="dataForm.merchantName" placeholder="商家名称"></el-input>
    </el-form-item>
    <el-form-item label="商户号" prop="merchantNo">
      <el-input v-model="dataForm.merchantNo" placeholder="商户号"></el-input>
    </el-form-item>
    <el-form-item label="门店号" prop="storeNo">
      <el-input v-model="dataForm.storeNo" placeholder="门店号"></el-input>
    </el-form-item>
    <el-form-item label="机具号" prop="posNum">
      <el-input v-model="dataForm.posNum" placeholder="机具号"></el-input>
    </el-form-item>
    <el-form-item label="负责人姓名" prop="leaderName">
      <el-input v-model="dataForm.leaderName" placeholder="负责人姓名"></el-input>
    </el-form-item>
    <el-form-item label="负责人身份证号码" prop="idCard">
      <el-input v-model="dataForm.idCard" placeholder="负责人身份证号码"></el-input>
    </el-form-item>
    <el-form-item label="联系方式" prop="telphone">
      <el-input v-model="dataForm.telphone" placeholder="联系方式"></el-input>
    </el-form-item>
    <el-form-item label="商家签名秘钥" prop="signKey">
      <el-input v-model="dataForm.signKey" placeholder="商家签名秘钥"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="dataForm.password" placeholder="密码"></el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="password2">
      <el-input type="password" v-model="dataForm.password2" placeholder="确认密码"></el-input>
    </el-form-item>
    <el-form-item>
    <div v-show="showDivs" style="float: right;"><i style="color: #FF0000;" >两次输入密码不一样</i></div>
    </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false,showDivs = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>
<script>
  import { validatePhone, validateIdNo, addressNum, nameNum, leaderName, passWord } from '../../../validate.js'
  export default {
    data () {
      return {
        showDivs: false,
        geoCoder: null,
        visible: false,
        location: {lng: 104.06, lat: 30.67},
        zoom: 11,
        dataForm: {
          id: 0,
          userId: '',
          merchantName: '',
          merchantAddress: '四川省成都市',
          isDelete: '',
          merchantNo: '',
          storeNo: '',
          posNum: '',
          isOpen: '',
          leaderName: '',
          idCard: '',
          telphone: '',
          signKey:'',
          password: '',
          password2: '',
          score: '',
          commentNum: '',
          gmtCreate: '',
          gmtModified: ''
        },
        clientHeight: document.documentElement.clientHeight - 90,
        iconUrl: 'icon/map_marker_check.png',
        dataRule: {
          userId: [
            { required: true, message: '用户ID不能为空', trigger: 'blur' }
          ],
          merchantName: [
            { required: true, validator: nameNum, trigger: 'blur' }
          ],
          merchantAddress: [
            { required: true, validator: addressNum, trigger: 'blur' }
          ],
          isDelete: [
            { required: true, message: '是否删除，0:未删除,1:已删除不能为空', trigger: 'blur' }
          ],
          merchantNo: [
            { required: true, message: '商户号不能为空', trigger: 'blur' }
          ],
          storeNo: [
            { required: true, message: '门店号不能为空', trigger: 'blur' }
          ],
          posNum: [
            { required: true, message: '机具号不能为空', trigger: 'blur' }
          ],
          isOpen: [
            { required: true, message: '是否营业:0:打烊,1:营业不能为空', trigger: 'blur' }
          ],
          leaderName: [
            { required: true, validator: leaderName, trigger: 'blur' }
          ],
          idCard: [
            { required: true, validator: validateIdNo, trigger: 'blur' }
          ],
          telphone: [
            { required: true, validator: validatePhone, trigger: 'blur' }
          ],
          signKey: [
            { required: true, message: '商家签名秘钥不能为空', trigger: 'blur' }
          ],
          password: [
              { required: true, validator: passWord, trigger: 'blur' }
          ],
          password2: [
              { required: true, validator: passWord, trigger: 'blur' }
          ],
          score: [
            { required: true, message: '商家评分不能为空', trigger: 'blur' }
          ],
          commentNum: [
            { required: true, message: '评论人数不能为空', trigger: 'blur' }
          ],
          gmtCreate: [
            { required: true, message: '创建时间不能为空', trigger: 'blur' }
          ],
          gmtModified: [
            { required: true, message: '修改时间不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      init (id) {
        this.dataForm.id = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            this.$http({
              url: this.$http.adornUrl(`/diancan/shopmerchantinfo/info/${this.dataForm.id}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.userId = data.shopMerchantInfo.userId
                this.dataForm.merchantName = data.shopMerchantInfo.merchantName
                this.dataForm.merchantAddress = data.shopMerchantInfo.merchantAddress
                this.dataForm.longitude = data.shopMerchantInfo.longitude
                this.dataForm.latitude = data.shopMerchantInfo.latitude
                this.dataForm.isDelete = data.shopMerchantInfo.isDelete
                this.dataForm.merchantNo = data.shopMerchantInfo.merchantNo
                this.dataForm.storeNo = data.shopMerchantInfo.storeNo
                this.dataForm.posNum = data.shopMerchantInfo.posNum
                this.dataForm.isOpen = data.shopMerchantInfo.isOpen
                this.dataForm.leaderName = data.shopMerchantInfo.leaderName
                this.dataForm.idCard = data.shopMerchantInfo.idCard
                this.dataForm.telphone = data.shopMerchantInfo.telphone
                this.dataForm.signKey=data.shopMerchantInfo.signKey
                this.dataForm.password = data.shopMerchantInfo.password
                this.dataForm.password2 = data.shopMerchantInfo.password
                this.dataForm.score = data.shopMerchantInfo.score
                this.dataForm.commentNum = data.shopMerchantInfo.commentNum
                this.dataForm.gmtCreate = data.shopMerchantInfo.gmtCreate
                this.dataForm.gmtModified = data.shopMerchantInfo.gmtModified
              }
            })
          }
        })
      },
      getLocationPoint (e) {
        /* 创建地址解析器的实例 */
        let geoCoder = new BMap.Geocoder()
        /* 获取位置对应的坐标 */
        geoCoder.getPoint(this.dataForm.merchantAddress, point => {
          localStorage.setItem('Lng', point.lng)
          localStorage.setItem('Lat', point.lat)
        })
      },
      getLocationPointClick (e) {
        localStorage.setItem('Lng', e.point.lng)
        localStorage.setItem('Lat', e.point.lat)
        let geoCoders = new BMap.Geocoder()
        /* 利用坐标获取地址的详细信息 */
        geoCoders.getLocation(e.point, res => {
          console.log(res)
          console.log(res.address)
          this.dataForm.merchantAddress = res.address
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            if (this.dataForm.password !== this.dataForm.password2) {
              this.showDivs = true
              return '两次输入密码不相等'
            } else {
              this.showDivs = false
            }
            this.$http({
              url: this.$http.adornUrl(`/diancan/shopmerchantinfo/${!this.dataForm.id ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                'id': this.dataForm.id || undefined,
                'userId': this.dataForm.userId,
                'merchantName': this.dataForm.merchantName,
                'merchantAddress': this.dataForm.merchantAddress,
                'longitude': localStorage.getItem('Lng'),
                'latitude': localStorage.getItem('Lat'),
                'isDelete': this.dataForm.isDelete,
                'merchantNo': this.dataForm.merchantNo,
                'storeNo': this.dataForm.storeNo,
                'posNum': this.dataForm.posNum,
                'isOpen': this.dataForm.isOpen,
                'leaderName': this.dataForm.leaderName,
                'idCard': this.dataForm.idCard,
                'telphone': this.dataForm.telphone,
                'signKey': this.dataForm.signKey,
                'password': this.dataForm.password
                // 'password2': this.dataForm.password2,
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                    this.showDivs = false
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>
